<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浙政钉 - 首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen p-4">
        <!-- 欢迎横幅 -->
        <div class="bg-gradient-to-r from-gov-blue to-blue-600 rounded-xl p-6 mb-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold mb-1">您好，xxxx</h2>
                    <p class="text-blue-100 text-sm">今日天气：晴朗 | 空气质量：良好</p>
                </div>
                <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <i class="fas fa-leaf text-2xl"></i>
                </div>
            </div>
        </div>

        <!-- 快速统计 -->
        <div class="grid grid-cols-2 gap-4 mb-6">
            <div class="bg-white rounded-lg p-4 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">在线监测企业</p>
                        <p class="text-2xl font-bold text-gov-blue">1,248</p>
                    </div>
                    <i class="fas fa-industry text-gov-blue text-xl"></i>
                </div>
            </div>
            <div class="bg-white rounded-lg p-4 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">今日报警</p>
                        <p class="text-2xl font-bold text-orange-500">12</p>
                    </div>
                    <i class="fas fa-exclamation-triangle text-orange-500 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- 主要功能模块 -->
        <div class="space-y-4">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">主要功能</h3>
            
            <!-- 环境业务栏目 -->
            <div class="card hover:shadow-lg transition-all duration-200 cursor-pointer" onclick="navigateToPage('env-business.html')">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-book text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">环境业务栏目</h4>
                        <p class="text-gray-500 text-sm">法律法规、环境标准、环保知识</p>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>

            <!-- 污染源监控结果查询 -->
            <div class="card hover:shadow-lg transition-all duration-200 cursor-pointer" onclick="navigateToPage('pollution-monitor.html')">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-industry text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">污染源监控结果查询</h4>
                        <p class="text-gray-500 text-sm">企业档案、在线监测、排名统计</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="badge badge-danger">12</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- 环境质量综合查询（环境空气） -->
            <div class="card hover:shadow-lg transition-all duration-200 cursor-pointer" onclick="navigateToPage('air-quality.html')">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-wind text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">环境空气质量查询</h4>
                        <p class="text-gray-500 text-sm">GIS展现、实时监测、达标率分析</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="badge aqi-good">良好</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- 环境质量综合查询（地表水） -->
            <div class="card hover:shadow-lg transition-all duration-200 cursor-pointer" onclick="navigateToPage('water-quality.html')">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-tint text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">地表水质量查询</h4>
                        <p class="text-gray-500 text-sm">水质监测、等级排名、达标率</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="badge water-excellent">优秀</span>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- 远程指挥调度决策模块 -->
            <div class="card hover:shadow-lg transition-all duration-200 cursor-pointer" onclick="navigateToPage('emergency-dispatch.html')">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 rounded-xl flex items-center justify-center">
                        <i class="fas fa-headset text-white text-lg"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">远程指挥调度决策</h4>
                        <p class="text-gray-500 text-sm">应急处理、事故定位、数据传输</p>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 最新通知 -->
        <div class="mt-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">最新通知</h3>
                <a href="#" class="text-gov-blue text-sm">查看全部</a>
            </div>
            <div class="space-y-3">
                <div class="bg-white rounded-lg p-4 border-l-4 border-orange-400">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-exclamation-circle text-orange-400 mt-1"></i>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800">某某企业废气排放超标预警</p>
                            <p class="text-gray-500 text-sm mt-1">10分钟前</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-lg p-4 border-l-4 border-blue-400">
                    <div class="flex items-start space-x-3">
                        <i class="fas fa-info-circle text-blue-400 mt-1"></i>
                        <div class="flex-1">
                            <p class="font-medium text-gray-800">环境空气质量日报已生成</p>
                            <p class="text-gray-500 text-sm mt-1">1小时前</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function navigateToPage(page) {
            // 向父窗口发送导航消息
            parent.postMessage({type: 'navigate', page: page}, '*');
        }

        // 添加点击效果
        document.querySelectorAll('.card').forEach(card => {
            card.addEventListener('click', function() {
                this.style.transform = 'scale(0.98)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 100);
            });
        });
    </script>
</body>
</html>